<template>
  <div class="box">
    <CardBox title="监测技术"></CardBox>
    <div class="content-container">
      <div class="title">{{title}}</div>
      <img class="title-line" src="@/assets/img/moniter-title-line.png" alt="">
<!--      <el-carousel height="350px" :interval="5000" arrow="always">-->
<!--        <el-carousel-item v-for="item in images" height="auto">-->
<!--          <img class="introduction-img" :src="item.url" alt="">-->
<!--        </el-carousel-item>-->
<!--      </el-carousel>-->
      <el-carousel
              class="image-swiper"
              height="350px"
              :interval="5000"
              arrow="always">
        <el-carousel-item v-for="(a, $i) in images" :key="$i">
          <el-image
                  style="width: 100%; height: 350px"
                  :src="a.url"
                  :preview-src-list="images.map(v => v.url)"
                  :initial-index="$i"
                  :fit="'cover'">
          </el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import CardBox from "@/components/Global/CardBox.vue";
import {EventBus} from "../../utils/event-bus";
export default {
  inject: ["imgUrl"], // 注入公共变量
  components: {
    CardBox,
  },
  data() {
    return {
      curIndex:0,//默认显示的索引
      title:'',
      images:[]
    };
  },
  created() {
    EventBus.$on('set-route-item', (message) => {
      this.title=message.title;
      if(message.localPhoto){
        while (this.images.length){
          this.images.pop();
        }
        var imageIds=message.localPhoto.split(",");
        for (let i = 0; i < imageIds.length; i++) {
          this.images.push({ url: this.imgUrl.replace("mw=500&mh=500&","") + imageIds[i] });
        }
      }
    })
  },
  mounted() {
  },
  methods:{
    getImage() {
      this.$api.device.getWZGCCG('JCJS').then((res) => {
        // this.images = [];
        while (this.images.length){
          this.images.pop();
        }
        if (res.imageIds) {
          var ids = res.imageIds.split(",");
          for (let i = 0; i < ids.length; i++) {
            this.images.push({ url: this.imgUrl.replace("mw=500&mh=500&","") + ids[i] });
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content-container {
  padding: 11px 15px;
  height: 406px;
  .title {
    font-size: 18px;
    color: #fff;
    text-align: center;
  }
  .title-line {
    width: 191px;
    height: 1px;
    margin: 10px auto 15px;
    display: block;
  }
  .introduction-img {
    width: 471px;
    height: 350px;
    margin: 0 auto;
    display: block;
    object-fit: fill;
  }

  .image-swiper {
    width: 471px;
    height: 350px;
    margin: 0 auto;
    display: block;
    object-fit: fill;
  }
}
</style>